<template>
  <div class="mask">
    <div class="pop-table">
      <div class="pop-table-style">
        <div class="tit">重点户（大户）监管统计分析</div>
        <el-table :data="data" style="width: 100%" class="list">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="Ssdw" label="所属单位" width="110">
          </el-table-column>
          <el-table-column prop="ykzh" label="许可证号" width="120">
          </el-table-column>
          <el-table-column prop="xm" label="姓名" width="80">
          </el-table-column>
          <el-table-column prop="jydz" label="经营地址" width="285">
          </el-table-column>
          <el-table-column prop="wlsl" label="外流数量(条)" width="140">
          </el-table-column>
        </el-table>

        <el-pagination :page-size="5" layout="prev, pager, next" :total="10">
        </el-pagination>
        <div class="close" @click="isClose()"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      data: [
        {
          index: 1,
          Ssdw: "合肥肥西县局",
          ykzh: 340123105773,
          xm: "刘吉文",
          jydz: "合肥市肥西县上派镇水晶城28幢113、114、115商铺",
          wlsl: 56,
        },
        {
          index: 2,
          Ssdw: "亳州涡阳县局",
          ykzh: 341621112944,
          xm: "郑顺祥",
          jydz: "亳州市涡阳县花沟镇陈庄居委会后路涯自然村001号(信湖煤矿门口东头)",
          wlsl: 31,
        },
        {
          index: 3,
          Ssdw: "合肥蜀山区局",
          ykzh: 340104119094,
          xm: "姜红颜",
          jydz: "合肥市蜀山区皖河路与岳西路交口学府名都19栋135号",
          wlsl: 24,
        },
        {
          index: 4,
          Ssdw: "淮北濉溪县局",
          ykzh: 340621210464,
          xm: "吴彦刚",
          jydz: "淮北市濉溪县韩村镇",
          wlsl: 20,
        },
        {
          index: 5,
          Ssdw: "合肥蜀山区局",
          ykzh: 340104100653,
          xm: "李静",
          jydz: "合肥市琥珀街道南村44幢附一层",
          wlsl: 17,
        },
        // {
        //   index: 6,
        //   yjdx: "商业企业",
        //   yjmc: "月度协议执行异常预警",
        //   yjsl: 12,
        //   dcqd: 6,
        //   fxwt: 50,
        // },
        // {
        //   index: 7,
        //   yjdx: "商业企业",
        //   yjmc: "商业无合同购入预警",
        //   yjsl: 34,
        //   dcqd: 17,
        //   fxwt: 50,
        // },
        // {
        //   index: 8,
        //   yjdx: "商业企业",
        //   yjmc: "需求预测提报异常预警",
        //   yjsl: 24,
        //   dcqd: 12,
        //   fxwt: 50,
        // },
        // {
        //   index: 9,
        //   yjdx: "商业企业",
        //   yjmc: "新入网客户档位设置异常预警",
        //   yjsl: 36,
        //   dcqd: 18,
        //   fxwt: 50,
        // },
        // {
        //   index: 10,
        //   yjdx: "商业企业",
        //   yjmc: "集中客户投放预警",
        //   yjsl: 46,
        //   dcqd: 23,
        //   fxwt: 50,
        // },
      ],
    };
  },
  components: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    isClose() {
      this.$emit("isHide", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100%;
  position: relative;
  .pop-table {
    width: 900px;
    height: 474px;
    background: url(../../assets/img/ng-pop-rank.png) no-repeat;
    background-size: 100% 100%;
    padding-left: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .pop-table-style {
      width: 100%;
      height: 474px;
      box-sizing: border-box;
      padding: 70px 21px 30px 21px;
      overflow: hidden;
      position: relative;
      .tit {
        position: absolute;
        top: 45px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        // font-family: Source Han Sans CN;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
      }
      .close {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
::v-deep .el-table {
  width: 464px;
  height: 325px;
  color: RGBA(255, 255, 255, 0.8);
}
::v-deep .el-table tr {
  background-color: RGBA(255, 255, 255, 0);
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border: none;
  background-color: RGBA(255, 255, 255, 0);
}
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: RGBA(255, 255, 255, 0);
}
::v-deep .el-table__header,
::v-deep .el-table__header thead,
::v-deep .el-table__header thead tr {
  color: #fff;
  background-color: RGBA(255, 255, 255, 0);
}
::v-deep .el-table__header {
  color: #fff;
  width: 464px !important;
}
::v-deep .el-table__header thead tr {
  background-color: #07185c;
}
::v-deep .el-pagination {
  float: right;
  margin-right: 25px;
  height: 22px;
  margin-top: 10px;
}
::v-deep .el-pagination button:disabled,
::v-deep .el-pager li,
.btn-next,
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
  background: none;
  border: 1px solid #747693;
  color: RGBA(255, 255, 255, 0.8);
  border-radius: 4px;
  margin-right: 5px;
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: RGBA(255, 255, 255, 0);
}
::v-deep .el-pager li.active + li {
  border: 1px solid #747693;
}
::v-deep .el-table::before {
  height: 0;
}
::v-deep .el-table .cell {
  white-space: nowrap;
  padding: 5px 10px;
}
</style>